<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>系统公告</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>

    <div th:include="common/common.html :: commonheader"></div>

</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common/common.html :: #leftmenu"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div th:replace="common/common.html :: headermenu"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                系统公告
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">学籍管理系统</a>
                </li>
                <li>
                    <a href="#">系统公告</a>
                </li>
                <li class="active">公告信息</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel-body">
                        <div class="adv-table">
                            <!-- 添加按钮 -->
                            <button id="notice_add_btn" type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#notice_add_modal">
                                添加记录
                            </button>
                            <button class="btn btn-danger" id="delete_all" th:pn="${page.current}">批量删除</button>
                            <table class="display table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th style="text-align: center" width="20px">
                                        <input type="checkbox" id="check_all"/>
                                    </th>
                                    <th style="text-align: center">主题</th>
                                    <th style="text-align: center">发布人</th>
                                    <th style="text-align: center">发布时间</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="sysNotice,stat:${sysNotices}">
                                    <td style="text-align: center"><input type='checkbox' class='check_item'/></td>
                                    <td style="text-align: center" th:text="${sysNotice?.getNTheme()}"></td>
                                    <td style="text-align: center" th:text="${sysNotice?.getNAuthor()}"></td>
                                    <td style="text-align: center"
                                        th:text="${#dates.format(sysNotice?.getNDate().getTime(), 'yyyy-MM-dd')}"></td>
                                    <td style="text-align: center" th:nId="${sysNotice?.getNId()}">
                                        <button type="button" class="btn btn-default info_btn" data-toggle="modal"
                                                data-target="#notice_info_modal"
                                                th:nContext="${sysNotice.getNContext()}">详细信息
                                        </button>
                                        <button type="button" class="btn btn-info update_btn" data-toggle="modal"
                                                th:nId="${sysNotice?.getNId()}"
                                                data-target="#notice_update_modal"
                                                th:nContext="${sysNotice.getNContext()}">修改
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <div th:replace="common/common.html :: footer"></div>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- 添加模态框 -->
<div class="modal fade" id="notice_add_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="notice_add_modal_close" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">成绩添加</h4>
            </div>

            <div class="modal-body">
                <form id="notice_add_form" class="form-horizontal" th:action="@{/sysNoticeAdd}" method="post">

                    <div class="form-group">
                        <label for="nTheme_add_form"
                               class="col-sm-2 control-label">*主题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="nTheme"
                                   id="nTheme_add_form" placeholder="主题" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="nAuthor_add_form"
                               class="col-sm-2 control-label">*发布人</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="nAuthor"
                                   id="nAuthor_add_form" placeholder="发布人" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="nContext_add_form"
                               class="col-sm-2 control-label">*具体内容</label>
                        <div class="col-sm-10">
                            <textarea id="nContext_add_form" name="nContext" style="width: 450px; height: 500px"
                                      required="required">
                            </textarea>
                        </div>
                        <input type="hidden" name="pn" th:value="${page.pages}">
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="notice_add_cancel" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" id="notice_add_enter" class="btn btn-primary">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 详细信息模态框 -->
<div class="modal fade" id="notice_info_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="notice_info_modal_close" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">成绩添加</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal" th:action="@{/sysNoticeAdd}" method="get">
                    <div class="form-group">
                        <label for="nTheme_add_form"
                               class="col-sm-2 control-label">*主题</label>
                        <div class="col-sm-10">
                            <textarea id="nContext_info_form" style="width: 450px; height: 500px"
                                      disabled="disabled">
                            </textarea>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 修改信息模态框 -->
<div class="modal fade" id="notice_update_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="notice_update_modal_close" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2">成绩添加</h4>
            </div>

            <div class="modal-body">
                <form id="notice_update_form" class="form-horizontal" th:action="@{/sysNoticeUpdate}" method="post">
                    <input type="hidden" id="nId_update_form" name="nId">
                    <input type="hidden" name="_method" value="PUT">
                    <div class="form-group">
                        <label for="nTheme_update_form"
                               class="col-sm-2 control-label">*主题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="nTheme"
                                   id="nTheme_update_form" placeholder="主题" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="nAuthor_update_form"
                               class="col-sm-2 control-label">*发布人</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="nAuthor"
                                   id="nAuthor_update_form" placeholder="发布人" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="nContext_update_form"
                               class="col-sm-2 control-label">*具体内容</label>
                        <div class="col-sm-10">
                            <textarea id="nContext_update_form" name="nContext" style="width: 450px; height: 500px"
                                      required="required">
                            </textarea>
                        </div>
                        <input type="hidden" name="pn" th:value="${page.current}">
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="notice_update_cancel" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" id="notice_update_enter" class="btn btn-primary">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="js/dynamic_table_init.js"></script>
<form style="display: none" method="post" th:action="@{/sysNoticeDelete}" id="delete_from">
    <input type="hidden" name="_method" value="DELETE">
    <input type="hidden" id="nIds" name="nIds">
    <input type="hidden" id="pn" name="pn">
</form>
<!--common scripts for all pages-->
<script src="js/scripts.js"></script>
<script type="text/javascript">
    $(function () {

        // 点击 确定添加按钮
        $("#notice_add_enter").click(function () {
            let nTheme = $("#nTheme_add_form").val().trim();
            let nAuthor = $("#nAuthor_add_form").val().trim();
            let nContext = $("#nContext_add_form").val().trim();
            if (nTheme === "" || nAuthor === "" || nContext === "") {
                alert("请确保*号信息都填写")
                return false;
            }
            document.getElementById("notice_add_form").submit();
        });

        // 取消添加
        $("#notice_add_cancel").click(function () {
            $("#notice_add_form")[0].reset();
        });

        // 取消修改
        $("#notice_update_cancel").click(function () {
            $("#notice_update_form")[0].reset();
        });

        // 关闭添加 模态框
        $("#notice_add_modal_close").click(function () {
            $("#notice_add_form")[0].reset();
        });

        // 关闭 修改 模态框
        $("#notice_update_modal_close").click(function () {
            $("#notice_update_form")[0].reset();
        });

        // 点击修改按钮
        $(document).on("click", ".update_btn", function () {
            let nTheme = $(this).parents("tr").find("td:eq(1)").text();
            let nAuthor = $(this).parents("tr").find("td:eq(2)").text();
            let nContext = $(this).attr("nContext");
            let nId = $(this).attr("nId");

            $("#nTheme_update_form").val(nTheme);
            $("#nAuthor_update_form").val(nAuthor);
            $("#nContext_update_form").val(nContext);
            $("#nId_update_form").val(nId);

        });
        // 点击查看详情按钮
        $(document).on("click", ".info_btn", function () {
            let nContext = $(this).attr("nContext");

            $("#nContext_info_form").val(nContext);
        });

        // 点击确定修改按钮
        $("#notice_update_enter").click(function () {
            $("#notice_update_form").submit();
        });

        // 全选按钮
        $("#check_all").click(function () {
            let checked = $(this).prop("checked");
            $(".check_item").prop("checked", checked);
        });

        // 实现批量删除
        $("#delete_all").click(function () {
            let nIds = "";
            let nNames = "";
            $.each($(".check_item:checked"), function () {
                nIds += $(this).parents("tr").find("td:eq(4)").attr("nId") + "-";
                nNames += $(this).parents("tr").find("td:eq(1)").text() + "-";
            });
            nIds = nIds.substring(0, nIds.length - 1);
            nNames = nNames.substring(0, nNames.length - 1);
            if (confirm("你确定要删除【" + nNames +"】吗?")) {
                // 发送 Ajax请求 批量删除
                let pn = $("#delete_all").attr("pn");
                $("#nIds").val(nIds);
                $("#pn").val(pn);
                $("#delete_from").submit();

                // $.ajax({
                //     url: "/sysNoticeDelete/" + nIds + "?pn=" + pn,
                //     type: "GET",
                //     success: function () {
                //         location.reload();
                //     }
                // });
            }
        });

        // 全选 按钮 和 单个 按钮的关系
        $(document).on("click", ".check_item", function () {
            let len = $(".check_item:checked").length;
            let flag = len === $(".check_item").length;
            $("#check_all").prop("checked", flag);
        });

    });
</script>


</body>
</html>
